<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <!--&lt;!&ndash; 引入element ui样式 &ndash;&gt;-->
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--&lt;!&ndash; 引入 element ui组件库 &ndash;&gt;-->
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
</head>
<body>

<div id="app">

               <form>
                     用户名<input type="text" v-model="formData.username"><br>
                     密码<input type="password" v-model="formData.password"><br>
                     性别
                   <input type="radio" value="male" v-model="formData.sex">男
                   <input type="radio" value="female"v-model="formData.sex">女
                   <br>
                     爱好
                   <input type="checkbox" value="洗澡"v-model="formData.hobby">洗澡
                   <input type="checkbox" value="看电视"v-model="formData.hobby">看电视
                   <input type="checkbox" value="睡觉"v-model="formData.hobby">睡觉
                   <br>
                     学历
                    <select v-model="formData.education">
                        <option value="初中">初中</option>
                        <option value="高中">高中</option>
                        <option value="大专">大专</option>
                        <option value="本科">本科</option>
                    </select>
                   <br>
                   简介<textarea rows="5" cols="20" v-model="formData.remark"></textarea>
                   <br>
                   <input type="button" @click="add" value="提交"></input><br>
               </form>

</div>
    <script>
         var  vm = new Vue({

             el:"#app",
             data:{
               //  提交给后台的数据 都是在data中声明的
                 formData:{
                     username:'',
                     password:'',
                     sex:'',
                     hobby:[],
                     education:'',
                     remark:''
                 }
             },
             methods:{

                 add(){
                     // alert("---"+JSON.stringify(this.formData))
                     //  axios 提交给后台
                     axios.post("/add.do",this.formData).then();

                 }
             }

         })

    </script>

</body>
</html>